<template>
	<uni-popup ref="popupRef" type="bottom" :isMaskClick="false">
		<view class="content">
			<view class="top">
				<view class="close"> </view>
				<view class="title"> 物流详情 </view>
				<image class="close" src="/static/icon/shop/close.png" @tap="close" />
			</view>
			<view class="logistics-details">
				<view class="item" v-for="(item, index) in list" :key="item">
					<view class="logi-item" :class="(index+1)==list.length? 'a-logi-item':''" v-if="index<=status">
						<view class="time"> {{ item.time }} </view>
						<view class="intro"> {{ item.title }} </view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue';
	const props = defineProps(['status', 'list'])
	const popupRef = ref()
	const open = () => {
		popupRef.value.open()
	}
	const close = () => {
		popupRef.value.close()
	}
	const active = ref(0)
	const list2 = [{
					title: '买家下单',
					desc: '2018-11-11'
				}, {
					title: '卖家发货',
					desc: '2018-11-12'
				}, {
					title: '买家签收',
					desc: '2018-11-13'
				}, {
					title: '交易完成',
					desc: '2018-11-14'
				}]
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 20px;
		border-radius: 10px 10px 0 0;
		background-color: #fff;
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20px;
			.title {
				color: #333333;
				font-size: 16px;
				font-weight: 500;
				line-height: 20px;
			}
			.close {
				width: 20px;
				height: 20px;
			}
		}
		.logistics-details {
			.logi-item {
				padding-left: 19px;
				margin-bottom: 30px;
				position: relative;
				&::before {
					display: block;
					content: '';
					position: absolute;
					top: 9px;
					left: 0px;
					width: 7px;
					height: 7px;
					background: #CDCDCD;
					border-radius: 50%;
				}
				&::after {
					display: block;
					content: '';
					position: absolute;
					top: 16px;
					left: 3px;
					width: 1px;
					height: 64px;
					background: #CDCDCD;
				}
				&.a-logi-item {
					&::before {
						background: #333333;
					}
					&::after {
						display: none;
					}
					.time {
						color: #666666;
					}
					.intro {
						color: #333333;
					}
				}
				.time {
					color: #999999;
					font-size: 12px;
					font-weight: 400;
					line-height: 18px;
					margin-bottom: 4px;
				}
				.intro {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 18px;
				}
			}
		}
	}
</style>